<template>
  <div class="register-container">
    <!-- 注册内容 -->
    <div class="register">
      <h3 v-if="!userInfo.username">
        请先登录
        <span class="go">我有账号，去 <a @click="toLogin">登陆</a> </span>
      </h3>
      <div v-if="userInfo.username">
        <el-descriptions class="margin-top" title="个人资料" :column="1" border>
          <!-- <template slot="extra">
      <el-button type="primary"  @click="dialogFormVisible = true">修改信息</el-button>
    </template> -->
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            {{ myData.nickname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ myData.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" class="tolImage">
              <i class="el-icon-location-outline"></i>
              头像
            </template>
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:3007/my/userinfo"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="userInfo.pic" :src="userInfo.pic" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i :class="sex"></i>
              性别
            </template>
            {{ myData.sex }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              地址
            </template>
            {{myData.address}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-message"></i>
              邮箱
            </template>
            {{ myData.email }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="btn">
          <el-button type="warning" @click="reInfo()"
            >修改信息
          </el-button>
          <el-button type="warning" @click="dialogFormVisible1 = true"
            >重置密码
          </el-button>
        </div>
      </div>
    </div>

    <el-dialog title="个人资料" :visible.sync="dialogFormVisible" width="40%">
      <el-form>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="userInfo.nickname" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="userInfo.username" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="userInfo.sex" @click="on()">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="userInfo.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="userInfo.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
     
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible1" width="40%">
      <el-form>
        <el-form-item label="原密码" :label-width="formLabelWidth">
          <el-input v-model="oldPwd" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="newPwd" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="确认密码" :label-width="formLabelWidth">
          <el-input v-model="newPwd1" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="reservePwd()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 底部 -->
    <div class="copyright">
      <div></div>
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>销售联盟</li>
        <li>宠物社区</li>
      </ul>
      <div class="address">地址：广西柳州市城中区广西科技大学东环校区</div>
      <div class="beian">东环大道268号</div>
    </div>
    
  </div>
</template>

<script>
import { mapState } from "vuex";
import { updateUserInfo, updatepwd, updateAvatar } from "../../api";
export default {
  name: "Register",
  data() {
    return {
      // 收集表单数据--手机号
      username: "",
      //验证码
      code: "",
      //密码
      oldPwd: null,
      //确认密码
      newPwd: "",
      newPwd1: "",
      //是否同意
      agree: true,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: "80px",
      myData: "",
      id: "",
      nickname: "",
      email: "",
      sex: "",
      imageUrl: "",
      imgUrl: "",
      user_pic: "",
      address:'',
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.user.myData;
    },
    headers() {
      return {
        Authorization: localStorage.getItem("TOKEN"),
      };
    },
    formInline(){
      return {
        id: 1,
        nickname: 'abv12345',
      }
    }
  },
  watch: {
    userInfo: {
      handler(val) {
        console.log(123);
        if (this.userInfo.sex == 1) {
          this.myData.sex = "男";
          this.sex = "el-icon-male";
        } else if (this.userInfo.sex == 0) {
          this.myData.sex = "女";
          this.sex = "el-icon-female";
        } else {
          this.myData = "";
        }
      },
      deep: true,
    },
  },
  created() {
   this.getData()
    // console.log(this.userInfo.id);
  },
  methods: {
    reInfo(){
  this.$store.dispatch("getMyUserInfo");
    this.dialogFormVisible = true
    // this.getData()
    },
    getData(){
  this.$store.dispatch("getMyUserInfo");
    console.log(this.userInfo);
    this.myData = JSON.parse(JSON.stringify(this.userInfo));
    console.log(this.myData, 11111);
    },
    toLogin() {
      this.$router.push("/login");
    },
   
    async ok() {
      let params = {
        id: this.userInfo.id,
        nickname: this.userInfo.nickname,
        email: this.userInfo.email,
        sex: this.userInfo.sex,
        address:this.userInfo.address
      };
      let res = await updateUserInfo(params);
      console.log(res);
      this.dialogFormVisible = false;
      // this.$store.dispatch("getMyUserInfo");
      this.myData = JSON.parse(JSON.stringify(this.userInfo));
      this.$message({
        message: "修改成功",
        type: "success",
      });
    this.getData()
    sessionStorage.setItem("userInfo", JSON.stringify(this.userInfo));
    },
    async reservePwd() {
      let params = {
        oldPwd: this.oldPwd,
        newPwd: this.newPwd,
      };
      if (this.newPwd != this.newPwd1) {
        this.$message({
          showClose: true,
          message: "两次输入的密码不一样",
          type: "error",
        });
        return;
      }
      if (this.oldPwd === this.newPwd) {
        this.$message({
          showClose: true,
          message: "新密码不能与原密码一致",
          type: "error",
        });
        return;
      }
      if (this.newPwd == "") {
        this.$message({
          showClose: true,
          message: "请输入新密码",
          type: "error",
        });
        return;
      }
      let res = await updatepwd(params);
      // this.myData = JSON.parse(JSON.stringify(this.userInfo))
      if (res.status == 0) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.dialogFormVisible1 = false;
        this.oldPwd = "";
        this.newPwd = "";
        this.newPwd1 = "";
      } else {
        this.$message({
          showClose: true,
          message: "原密码不正确",
          type: "error",
        });
      }
    },
   async handleAvatarSuccess(res, file) {
     console.log(res,77777777);
      this.userInfo.pic = URL.createObjectURL(file.raw);
      // console.log(this.userInfo.pic,3333);
       let params = {
        id: this.userInfo.id,
        nickname: this.userInfo.nickname,
        pic : this.userInfo.pic
      };
    let result = await updateUserInfo(params)
    },
    beforeAvatarUpload(file) {
      // console.log(file,2222);
      //  let params = {
      //    avatar:'123'
      //  }
      //   let res = await updateAvatar(params)
      //   console.log(res.data);
     
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="less" scoped>
.register-container {
  width: 100%;
  .register {
    width: 1200px;
    height: 445px;
    border: 1px solid rgb(223, 223, 223);
    margin: 0 auto;
    padding: 30px;

    h3 {
      background: #ececec;
      margin: 0;
      padding: 6px 15px;
      color: #333;
      border-bottom: 1px solid #dfdfdf;
      font-size: 20.04px;
      line-height: 30.06px;

      span {
        font-size: 14px;
        float: right;

        a {
          color: #ee5533;
          cursor: pointer;
        }
      }
    }

    div:nth-of-type(1) {
      margin-top: 20px;
    }

    .content {
      padding-left: 390px;
      margin-bottom: 18px;
      position: relative;

      label {
        font-size: 14px;
        width: 96px;
        text-align: right;
        display: inline-block;
      }

      input {
        width: 270px;
        height: 38px;
        padding-left: 8px;
        box-sizing: border-box;
        margin-left: 5px;
        outline: none;
        border: 1px solid #999;
      }

      img {
        vertical-align: sub;
      }

      .error-msg {
        position: absolute;
        top: 100%;
        left: 495px;
        color: red;
      }
    }

    .controls {
      text-align: center;
      position: relative;

      input {
        vertical-align: middle;
      }

      .error-msg {
        position: absolute;
        top: 100%;
        left: 495px;
        color: red;
      }
    }

    .btn {
      text-align: center;
      line-height: 36px;
      margin: 17px 0 0 55px;
      button {
        outline: none;
        width: 270px;
        height: 36px;
        background: #ee5533;
        color: #fff !important;
        display: inline-block;
        font-size: 16px;
      }
    }
  }
  .model {
    overflow: scroll;
  }
  .copyright {
    width: 1200px;
    margin: 56px auto;
    text-align: center;
    line-height: 24px;

    ul {
      li {
        display: inline-block;
        border-right: 1px solid #e4e4e4;
        padding: 0 20px;
        margin: 15px 0;
      }
    }
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  // margin: 25px;
  position: relative;
  left: 40px;
  bottom: 20px;
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 70px;
  height: 70px;
  display: block;
  padding: auto;
  position: relative;
  left: 40px;
  bottom: 20px;
  border: 1px solid #aaa;
  border-radius: 50%;
  img {
    width: 100px;
  }
}
.tolImage {
  height: 20px;
}
</style>
